<template>
    <el-card class="box-card">
        <div slot="header" class="card-heaer">
            <span style="line-height: 36px;">全球紧急救援-紧急转院费报案信息</span>
            <el-button type="danger" style="float:right" @click="delect" v-if="(newState=='新增'|| (newState=='待办任务' && isNewAdd)) && isUp!='账单上传'">删除</el-button>
        </div>

        <el-form ref="form" :model="fromlist[model].obj" :rules.sync="modelrules" label-width="200px">

            <el-form-item label="意外/急性病发生时间:" prop="RI_HCHANGE_TIME">
                <el-date-picker v-model="fromlist[model].obj.RI_HCHANGE_TIME" type="datetime" :disabled=" newState=='审核' || (newState=='追加' && !isNewAdd ) || (newState=='待办任务' && !newIsEditer )" placeholder="选择日期时间">
                </el-date-picker>

            </el-form-item>
            <el-form-item label="是否是美国境内:" prop="RI_HCHANGE_ISUS">
                <el-radio-group v-model="fromlist[model].obj.RI_HCHANGE_ISUS" :disabled=" newState=='审核' || (newState=='追加' && !isNewAdd ) || (newState=='待办任务' && !newIsEditer )">
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                </el-radio-group>

            </el-form-item>
            <el-form-item label="意外/急性病发生地点:" v-show="fromlist[model].obj.RI_HCHANGE_ISUS!='否'" :rules="{
              required: fromlist[model].obj.RI_HCHANGE_ISUS!='否', message: '项目名称不能为空', trigger: 'blur'
            }">
                <el-radio-group style="float:left; ">
                    <el-cascader  :disabled=" newState=='审核' || (newState=='追加' && !isNewAdd ) || (newState=='待办任务' && !newIsEditer )" :options="address" v-model="fromlist[model].obj.RI_HCHANGE_ADDRESS">
                    </el-cascader>
                </el-radio-group>

            </el-form-item>

            <el-form-item label="意外/急性病发生详细地址:" prop="RI_HCHANGE_ADDRESSDETAIL">
                <el-input v-model="fromlist[model].obj.RI_HCHANGE_ADDRESSDETAIL" :disabled=" newState=='审核' || (newState=='追加' && !isNewAdd ) || (newState=='待办任务' && !newIsEditer )" style="float:left; width:200px; padding-left:5px"></el-input>
            </el-form-item>
            <el-form-item label="原救援机构/医疗机构名称:" prop="RI_HCHANGE_HNAME">
                <el-input v-model="fromlist[model].obj.RI_HCHANGE_HNAME" :disabled=" newState=='审核' || (newState=='追加' && !isNewAdd ) || (newState=='待办任务' && !newIsEditer )" style="float:left; width:200px; padding-left:5px"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="RI_HCHANGE_HADDRESS">
                <el-input v-model="fromlist[model].obj.RI_HCHANGE_HADDRESS" :disabled=" newState=='审核' || (newState=='追加' && !isNewAdd ) || (newState=='待办任务' && !newIsEditer )" style="float:left; width:200px; padding-left:5px"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="RI_HCHANGE_HTEL">
                <el-input v-model="fromlist[model].obj.RI_HCHANGE_HTEL" :disabled=" newState=='审核' || (newState=='追加' && !isNewAdd ) || (newState=='待办任务' && !newIsEditer )" style="float:left; width:200px; padding-left:5px"></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱" prop="RI_HCHANGE_HEMAIL">
                <el-input v-model="fromlist[model].obj.RI_HCHANGE_HEMAIL" :disabled=" newState=='审核' || (newState=='追加' && !isNewAdd ) || (newState=='待办任务' && !newIsEditer )" style="float:left; width:200px; padding-left:5px"></el-input>
            </el-form-item>
            <el-form-item label="现救援机构/医疗机构名称:" prop="RI_HCHANGE_NNAME" v-if="isUp">
                <el-input v-model="fromlist[model].obj.RI_HCHANGE_NNAME" :disabled=" newState=='审核' || (newState=='追加' && !isNewAdd ) || (newState=='待办任务' && !newIsEditer )" style="float:left; width:200px; padding-left:5px"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="RI_HCHANGE_NADDRESS " v-if="isUp">
                <el-input v-model="fromlist[model].obj.RI_HCHANGE_NADDRESS" :disabled=" newState=='审核' || (newState=='追加' && !isNewAdd ) || (newState=='待办任务' && !newIsEditer )" style="float:left; width:200px; padding-left:5px"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="RI_HCHANGE_NTEL" v-if="isUp">
                <el-input v-model="fromlist[model].obj.RI_HCHANGE_NTEL" :disabled=" newState=='审核' || (newState=='追加' && !isNewAdd ) || (newState=='待办任务' && !newIsEditer )" style="float:left; width:200px; padding-left:5px"></el-input>
            </el-form-item>
            <el-form ref="form" :model="fromlist[model].obj" label-position="top" :rules.sync="modelrules" label-width="180px">
                <el-form-item label="详情描述(意外事故说明/急性病症状、初次就医时间、就医持续时间、治疗现状等)" prop="RI_HCHANGE_DETAIL">
                    <el-input type="textarea" v-model="fromlist[model].obj.RI_HCHANGE_DETAIL" :disabled=" newState=='审核' || (newState=='追加' && !isNewAdd ) || (newState=='待办任务' && !newIsEditer )"></el-input>
                </el-form-item>
                <el-form-item label="转院需求详情描述(拟采用的交通工具等):" prop="RI_HCHANGE_CDETAIL">
                    <el-input type="textarea" v-model="fromlist[model].obj.RI_HCHANGE_CDETAIL" :disabled=" newState=='审核' || (newState=='追加' && !isNewAdd ) || (newState=='待办任务' && !newIsEditer )"></el-input>
                </el-form-item>
                <el-form-item label="附件上传" prop="RI_HCHANGE_DOC" v-if="newState!='审核'">
                    <el-button type="primary" class="fileselect">
                        <input type="file" @change="upload" value="" id="fileup"> 上传附件
                    </el-button>
                </el-form-item>
                <el-form-item label="附件下载" v-if="newState=='审核'">
                    <el-button type="primary" class="fileselect" @click="download">
                        下载附件
                    </el-button>
                </el-form-item>
                <el-form-item label="审核:" v-if="newState=='审核'|| ( newState=='追加'&& !isNewAdd)">
                    <el-select placeholder="审核" v-model="fromlist[model].obj.RI_HCHANGE_STATE" :disabled=" (newState=='审核' && oldState!='需审核') || (newState=='追加' && !isNewAdd ) ">
                        <el-option label="审核通过" value="审核通过"></el-option>
                        <el-option label="退回重新填写" value="需修改"></el-option>
                        <el-option label="拒赔" value="审核不通过"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="拒赔原因:" v-if="fromlist[model].obj.RI_HCHANGE_STATE=='审核不通过'">
                    <el-input type="textarea" v-model="fromlist[model].obj.RI_HCHANGE_WHY" :disabled="newState!='审核'"></el-input>
                </el-form-item>
                <el-form-item label="修改原因:" v-if="fromlist[model].obj.RI_HCHANGE_STATE=='需修改'">
                    <el-input type="textarea" v-model="fromlist[model].obj.RI_HCHANGE_WHY" :disabled="newState!='审核'"></el-input>
                </el-form-item>
            </el-form>
        </el-form>
    </el-card>
</template>
<script>
import {
    mapState
} from 'vuex';
export default {
    data() {
        return {
            medical: this.$store.state.reportform.medical,
            oldState: this.$store.state.reportform.fromlist[this.model].obj.RI_HCHANGE_STATE,
            showwhy: false,
            hospatialList: [],
            issuccess: false //是否通过
        }
    },
    props: {
        //对象
        model: {
            type: Number,
            default: 0
        },
        //对象约束
        modelrules: {
            type: Object,
            default: {}
        },
        //状态2.0 新增 追加 待办任务
        newState: {
            type: String,
            default: "新增"
        },
        //状态2.0 代办任务中是否是需修改的 默认是true
        newIsEditer: {
            type: Boolean,
            default: true
        },
        //状态2.0 追加中是否是新增 默认是false 可以编辑
        isNewAdd: {
            type: Boolean,
            default: false
        },

        //是否是审核
        ischeck: {
            type: Boolean,
            default: false
        },
        //在账单上传时显示
        isUp: {
            type: String,
            default: ""
        }

    },

    methods: {
        upload(event) {
            let file = event.target.files[0];
            if (file) {
                const formData = new FormData();
                formData.append('file', file);
                this.$http.post('ReportInfomation/file', formData, {
                    progress(event) {
                        //传递给父组件的progress方法

                        // self.$emit('progress', parseFloat(event.loaded / event.total * 100), flag)
                    }
                }).then(response => {
                    var data = response.body;
                    this.loading = false;
                    if (data.code == 1) {

                        this.fromlist[this.model].obj.RI_HCHANGE_DOC = data.msg[0];
                        this.$notify({
                            title: '附件上传成功',
                            message: '附件上传成功',
                            type: 'success'
                        });
                        document.getElementById("fileup").value = "";

                    } else {
                        this.loding = false;
                        this.$notify.error({
                            title: '提交失败',
                            message: data.msg
                        });
                        document.getElementById("fileup").value = "";

                    }
                }, response => {
                    this.loading = false;
                    this.$notify.error({
                        title: '网络错误',
                        message: '网络错误'
                    });
                    this.loding = false;
                    document.getElementById("fileup").value = "";
                })


            }
        },

        delect() {

            if (this.model !== -1) {
                this.fromlist.splice(this.model, 1)
            }
        },
        download() {
            var url = this.$http.options.root;
            var base = url.substring(0, url.length - 3);
            window.open(base + "Upload/" + this.fromlist[this.model].obj.RI_HCHANGE_DOC);
        }
    },
    computed: mapState({
        // 箭头函数可使代码更简练
        // medical: state => state.reportform.medical,
        address: state => state.select.address,
        medicalrules: state => state.reportform.medicalrules,
        fromlist: state => state.reportform.fromlist
    })

}
</script>